forced synchronous layout

レイアウトで凝ったことやると起こる

ブラウザに表示されたwebページのあるDOMの大きさ（幅や高さ）を取得する時に

ある部分の大きさが、他の要素の大きさに影響される事がある

中身を全部レンダリングしなければ、bodyの大きさは確定しない

ブラウザはどうなるか？

すごい大変そう

デザイン上しょうがない

しかし、重いのでなるべく「仮レンダリングして元の位置に戻ってくる」回数を減らしたい

子コンポーネントが、親コンポーネントのサイズを見て大きさを変える場合等にも発生する

画面が固まる

末端の方のコンポーネントから、上の方のサイズを参照したりすると固まる

他にもありそう

こんな感じでcacheすると回避できる

code:js

let clientWidth // cache

window.addEventListener('resize', () => clientWidth = document.body.clientWidth)